
<!-- 浮层选择插件 -->
<template>
    <div class="selectListWrap" :style="pageType == 4 ? 'z-index:101' : ''">
        <div class="selectList" @click="clickOrgan" htmdEvt="clickOrgan_btn">
            <div class="selectListResult">
            	<span class="name" :style="alreadyClick ? 'color:#FF6500' : ''">{{selectName}}</span>
            	<!-- 箭头 -->
            	<span :class="[alreadyClick ? 'top' : 'angle']"></span>
            </div>
        </div>

        <!-- 浮层 -->
       
        <div class="selectPop" v-if="showSelectPop">
			<img src="../img/common/orange.png" class="topban">
    		<ul class="selectUl">
    			<li class="selectLi" v-for='(item, index) in selectLi' :style="item.name == selectName ? 'color:#FF6500' : ''" @click="clickLi(item.name,item.value)" htmdEvt='organ_btn'>{{item.name}}</li>
    		</ul>	
        	
        	
        </div>

    </div>
</template>

<script>
export default {
    name: 'selectListWrap',
    props: {
        selectIndex: { 
            type: String,
		},
		pageIndex: { 
            type: String,
		},
		selectName: {
			type: String,
		},
		selectLi: {
            type: Array
		},
		pageType:{
            type: String
        }
    },
    data() {
        return {
			type: 0,
			showSelectPop: false,
			alreadyClick: false
        }
    },
    mounted(){
		console.log('8888888',this.pageType)
    },
    methods: {
		// 点击选择组织
		clickOrgan(){
			console.log('选择组织')
			this.showSelectPop = !this.showSelectPop
			this.alreadyClick = !this.alreadyClick
			this.$emit('getOrangeData')
		},
		// 选择组织选项
		clickLi(name,val){
			this.showSelectPop = false
			this.$emit('getOrangeData',name,val)
			this.alreadyClick = false
		},
		// 关闭pop
		offSelectPop(){
			this.showSelectPop = false
			this.alreadyClick = false
		}
	}
};

</script>


<style lang="less">

.selectListWrap {
	margin-left: 2rem;
    display: inline-block;
	position: relative;
	width: 4rem;
	// z-index: 101;
    .selectListResult{
      	color: #91959E;
      	min-width: 2.6rem;
      	text-align: center;
        font-size: 0;

        .name{
        	font-size: 0.65rem;
        	
        }

        .angle{
        	margin-left: 0.2rem;
        	font-size: 0;
        	width: 0;
        	height: 0;
        	border-width: 0.2rem;
        	border-style: solid;
        	border-color: #91959E transparent transparent transparent;
            margin-top: 0.25rem;
            display: inline-block;
            // vertical-align: baseline;
        	
		}
		.top{
			margin-left: 0.2rem;
        	font-size: 0;
        	width: 0;
        	height: 0;
        	border-width: 0.2rem;
        	border-style: solid;
			border-color: transparent transparent #FF6500 transparent;
            margin-top: -0.25rem;
            display: inline-block;
			// vertical-align: baseline;
		}
    }


    .selectPop{
    	position: absolute;
    	z-index: 10;
    	text-align: center;
    	margin-top: .4rem;
		left: -1.4rem;
		box-shadow: 0 2px 12px 0 rgba(0,0,0,0.14);
		background: #fff;
		border-radius: .15rem;
    	.selectUl{
			width: 5.6rem;

    	}
    	.selectLi{
    		
    		font-size: .65rem;
    		color: #1D212B;
    		padding-top: 0.8rem ;
    		padding-bottom: 0.75rem ;
			border-bottom: 0.025rem solid #E7E7E7;
			margin-left: 1rem;
			margin-right: 1rem;

    		&:last-child{
    			border-bottom: 0;
    		}
    	}
        .topban{
			position: absolute;
			// left: ;
			top: -.3rem;
			width: 5.6rem;
		}
    	


    }

}

</style>